import React, { useEffect, useState } from 'react';
import style from "./style.module.scss";
import http from '@/api/axios';


const Comment: React.FC = () => {
  const [commentData, setCommentData] = useState<string[] | null>(null)

  useEffect(() => {
    const getData = async () => {
      try {
        const res = await http.get('/api/comments');
        setCommentData(res.data.data)
      } catch (error) {
        console.error('初始化数据失败:', error);
      }
    }
    getData()
  }, [])


  return (
    <>
      <div className={style.main}>
        <h3>精选评论</h3>
        <div className={style.content}>
          <ul>
            {commentData?.map((item) => <li key={item}>{item}</li>)}
            {/* 填补显示区域的空白 */}
            <li>{commentData?.[0]}</li>
          </ul>
          <div className={style.border}></div>
        </div>
      </div>
    </>
  )
}

export default Comment;